<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>基本过滤选择器</h1>
    <ul>
        <li>:odd：奇数</li>
        <li>:even：偶数</li>
        <li>:first：第一个元素</li>
        <li>:last：最后一个元素</li>
        <li>:eq(index)：第几个元素</li>
        <li>:gt(index)：大于第几个元素</li>
        <li>:lt(index)：小于第几个元素</li>
        <li>:header：标题（h1-h6）</li>
        <li>:focus：获取焦点（一般在input使用）</li>
        <li>:not(选择器)：不是</li>
    </ul>
    <div class="div1">
        <P>p1</P>
        <P>p2</P>
        <P>p3</P>
        <P>p4</P>
        <P class="p1">p5</P>
        <P>p6</P>
        <P>p7</P>
        <P class="p1">p8</P>
        <P>p9</P>
        <P>p10</P>
    </div>
    <input type="text" class="input1" autofocus/>
</body>
<script src="../jquery-3.6.0.min.js"></script>
<script>
    // 奇数：红色
    $(".div1>p:odd").css({color: "#f00"});

    // 偶数：蓝色
    $(".div1>p:even").css({color: "#00f"});

    // 第一个：背景青色
    $(".div1>p:first").css({backgroundColor: "#0ff"});

    // 第最后一个：背景黄色
    $(".div1>p:last").css({backgroundColor: "#ff0"});

    // 第五个：加上黄色边框
    $(".div1>p:eq(4)").css({border: "1px solid #ff0"});

    // 小于第五个：字变小
    $(".div1>p:lt(4)").css({fontSize: "65%"});

    // 大于第五个：字变大
    $(".div1>p:gt(4)").css({fontSize: "120%"});

    // 不是.p1文字居中
    $(".div1>p:not(.p1)").css({textAlign: "center"});

    // 有焦点时
    $(".input1:focus").css({border: "1px solid #f00"});
</script>
</html>